<template>
  <div>
    <el-form label-position="top" class="panel" style="text-align:left;">
      <!-- 图表页左侧栏目数据源 -->
      <el-form-item v-show="dataSrcVisible" :label="$t('common.dataSource')+':'">
        <el-select v-model="selectedBase" size="mini" filterable :placeholder="$t('dataSource.sourcePlaceholder')" style="width:200px;" clearable @change="handleBaseChange">
          <el-option v-for="item in baseList" :key="item.id" :label="item.baseAlias || item.dataschema" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-show="dataSrcVisible" v-model="selectedTable" :disabled="!selectedBase" size="mini" filterable :placeholder="$t('dataSource.tablePlaceholder')" style="width:200px;" clearable @change="handleDataSrcChange">
          <el-option v-for="item in tableList" :key="item.id" :label="item.tableAlias || item.tableName" :value="item.tableName" />
        </el-select>
      </el-form-item>

      <el-form-item v-show="!dataSrcVisible" :label="$t('dataSource.table')+':'">
        <span style="font-size: 12px;margin-right: 5px;">{{ selectedBaseName }}/{{ selectedTableName }}</span>
        <el-button type="text" size="mini" @click="editDataSrc">
          {{ $t('common.edit') }}
        </el-button>
      </el-form-item>
      <el-form-item :label="$t('dataSource.fields')+':'">
        <draggable v-model="tableSchema" v-loading="schemaLoading" :group="{name: 'col',pull: 'clone', put: false}" :move="handleMove">
          <div v-for="col in tableSchema" :key="col.Column" class="drag-list-item">
            <i class="el-icon-rank" style="font-size: 12px;color:#409EFF;" />
            {{ col.Column }}
          </div>
        </draggable>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { sourceList, linkedTablesByBase } from '@/api/source'
import draggable from 'vuedraggable'
import exeSql from '@/api/exeSql'
//import { getFieldByTabId } from '@/api/dashboard'
import store from '../store'

export default {
  components: { draggable },
  props: {
    resultLoading: {
      default: false
    },
    dataSrc: {
      requred: true
    }
  },
  data() {
    return {
      schemaLoading: false,
      baseList: [],
      tableList: [],
      selectedTable: undefined,
      tableSchema: undefined,
      dataSrcVisible: this.$route.params.id === 'create',
      existWarning: null,
      selectedBase: undefined,
    }
  },
  computed: {
    allSelected() {
      return store.state.dimensions.concat(store.state.caculCols)
    },
    selectedBaseName() {
      const selectedBase = this.baseList.find(item => item.id === this.selectedBase)
      if (!selectedBase) return ''
      return selectedBase.baseAlias || selectedBase.dataschema
    },
    //数据源所对应表名
    baseTableName(){
       const selectedBase = this.baseList.find(item => item.id === this.selectedBase)
       return selectedBase.dataschema
    },
    selectedTableName() {
      const selectedTable = this.tableList.find(item => item.tableName === this.selectedTable)
      if (!selectedTable) return ''
      return selectedTable.tableAlias || selectedTable.tableName
    }
  },
  created() {
    this.getBaseList()
  },
  methods: {
    async getBaseList() {
      let parameter = {pageNo: 1,pageSize: 1000}
      const { result } = await sourceList(parameter)
      this.baseList = result.records
    },
    initWithDataSrc(dataSrc) {
      if (dataSrc) {
        this.selectedTable = dataSrc.table
        this.selectedBase = dataSrc.source_id
        this.fetchTables()
      } else {
        this.selectedTable = ''
        this.selectedBase = ''
        this.tableSchema = []
        this.dataSrcVisible = true
      }
    },
    editDataSrc() {
      this.dataSrcVisible = true
      this.selectedTable = undefined
    },
    handleBaseChange() {
      this.fetchTables()
    },
    async fetchTables() {
      const { result } = await linkedTablesByBase({databaseId:this.selectedBase,status:1})
      this.tableList =  result.records
      //编辑的时候
      if(this.$route.params.id){
          this.fetchSchema() 
      }
    },
    handleDataSrcChange() {
      this.dataSrcVisible = false
      this.fetchSchema()
      store.setAllColsAction([])
      this.$emit('change', {
        table: this.selectedTable,
        source_id: this.selectedBase,
      })
    },

    fetchSchema() {
      if (!this.selectedTable) {
        this.tableSchema = []
        return
      }
      this.schemaLoading = true
      let sql ="select COLUMN_NAME,DATA_TYPE from information_schema.columns where TABLE_SCHEMA='"+this.baseTableName+"' and table_name='"+this.selectedTable+"'"
      exeSql().fetch({sourceId:this.selectedBase,sql:sql}).then(resp =>{
        this.schemaLoading = false;
        this.tableSchema = resp.result.map((item, index) => {
          return {
            Column: item.column_name.toLowerCase(),
            Type: item.data_type,
            id: index
          }
        })
        store.setAllColsAction(this.tableSchema)
      })
    },
    handleMove(evt, originalEvent) {
      if (this.allSelected.find(item => item.Column === evt.draggedContext.element.Column)) {
        if (!this.existWarning) {
          this.existWarning = this.$message({
            type: 'warning',
            message: this.$t('chart.fieldExisted'),
            onClose: (instance) => {
              this.existWarning = null
            }
          })
        }
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.panel {
  /deep/ .el-form-item__label {
    line-height: initial;
  }
   /deep/ .el-form-item__content {
    line-height: initial;
  }
}
.drag-list-item {
  line-height: 1.5;
  font-size: 14px;
  color:#606266;
  cursor: -webkit-grab;
}
</style>
